<%-- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags" %> --%>

<!DOCTYPE HTML> <!-- PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
<html>
  <head>

		<%@ page language="java" pageEncoding="UTF-8"%>
		<%@ page contentType="text/html;charset=UTF-8"%>
		 <%@ taglib prefix="s" uri="/struts-tags" %>
		 <%@ taglib prefix="sec"
				uri="http://www.springframework.org/security/tags"%>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
       <title>数据展示系统</title>
        <meta content='width=device-width, initial-scale=0.5, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="../css/systemManage/btn.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
		<link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
        <link href="../css/bootstraptable/bootstrap-table.css" rel="stylesheet" />
        <link href="../css/time/css//bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
      	 <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap3.2.js" charset="UTF-8"></script> 
		
        <script type="text/javascript" src="../js/plugins/bootstraptable/bootstrap-table.js"></script>
        <script src="../js/bootstrap-table-zh-CN.min.js"></script> 
  		 <script src="../js/highCharts/highcharts.js"></script>
		<script src="../js/highCharts/themes/grid.js"></script>
		<script src="../js/highCharts/modules/exporting.src.js"></script>
		<!-- 导出扩展 -->
   		<script type="text/javascript" src="../js/plugins/bootstraptable/bootstrap-table-export.js"></script>
   		<script src="../js/plugins/bootstraptable/tableExport.js"></script>
		 <script src="../js/plugins/bootstrapconfirmation/bootstrap-confirmation.min.js"></script>
		 
		<!--一些初始化操作 ，自定义js -->		
		<script type="text/javascript"  src="../js/monitorData/waterInfoInit.js"></script>  
		<script type="text/javascript"  src="../js/monitorData/realTimeInfo.js"></script>  
		<script type="text/javascript"  src="../js/monitorData/historyInfo.js"></script>  
		<script type="text/javascript"  src="../js/monitorData/dataIn.js"></script> 
	
		
		<!-- 时间相关JS -->
		<script type="text/javascript" src="../css/time/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="../css/time/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>   
		<script type="text/javascript" src="../css/time/js/bootstrap-clockpicker.min.js"></script>
			<%-- <script src="../js/monitorData/index.js"></script>	 --%>                           		       
    </head>
    
    <body >
    
    		<div class="nav-tabs-custom">
						<!-- Tabs within a box -->
							<ul class="nav nav-tabs pull-right">															
								
								<li >
									<a href="#dataEnterIn" data-toggle="tab">数据录入</a>
								</li>
								<li >
									<a href="#historyData" data-toggle="tab">历史数据</a>
								</li>
								
								<li class="active">
									<a href="#realTimeData" data-toggle="tab">实时数据</a>
								</li>
								
							</ul>
							
							<div class="tab-content no-padding">
							
								<div class="chart tab-pane active" id="realTimeData" style="position: relative;">
								<div class="row">
								 <div class="col-md-12">
								 		
								 	<div class="row" style="margin-left:20px;margin-right:20px;" align='center' >							 
								<!-- 厂区运行实时数据表格显示 -->
									<h3  align='center' id= "waterPlantRealDataName">
									<font ><s:property value="waterPlantName"/>厂区运行实时数据</font></h3> 
									
									<h4  align='left' id= "waterPlantRealDataTime">
									<font >采集时间：</font></h4>   								
										<div class="table-responsive">		
										<!-- data-show-toggle="true" data-show-columns="true" -->		
											 <%-- <table data-toggle="table" style="white-space: nowrap; text-align:center"  class="table table-hover table-striped table-bordered table-condensed" 
											 		id="WaterPlantRealTimeDataTable"  data-cache="false"  
                               						  data-search="true" data-select-item-name="toolbar1" 
                                						data-pagination="true" data-page-list="[5,10,20,50]"  data-show-export= "true" >	
												<thead>
                                  					<tr>           
                                       					<th data-field="waterPlantName" data-sortable="true" data-align="center"><SUB>水厂名称</SUB><font size="4">\</font><sup>数据类型</sup></th>
                                       					<th data-field="time"  data-sortable="true" data-align="center">时间</th>                                                                   					
                                       					<th data-field="turbidity"  data-align="center">出厂浊度(NTU)</th>                               
                                       					<th data-field="chlorine"  data-align="center">出厂余氯(mg/L)</th>  
                                       					<th data-field="supplyFlow"  data-align="center">供水量(m³)</th>                                    		
                                  					 </tr>
                                  				</thead>
                       
                              				 </table> --%><!-- /.table-->  
                              				 <table class="table table-hover table-bordered table-condensed">
                              				 <tbody id="WaterPlantRealtableBody">
                              				  </tbody>
                              				 </table>
										</div>	
										</div>
																				
										<!-- 管网监测实时数据表格显示 -->
										<div class="row" style="margin-left:20px;margin-right:20px;" align='center' >
								
									<h3  align='center' id="stationWaterNameStr"><font ><s:property value="waterPlantName"/>管网监测实时数据</font></h3>					
										<div class="table-responsive">		
										<!-- data-show-toggle="true" data-show-columns="true" -->		
											<table data-toggle="table" style="white-space: nowrap; text-align:center" class="table table-hover table-striped table-bordered table-condensed" id="stationRealTimeDataTable"  data-cache="false"  
                               						 data-search="true" data-select-item-name="toolbar1" 
                                						data-pagination="true"  data-page-list="[5,10,20,50]"  data-show-export= "true" >	
												<thead>
                                  					<tr>           
                                       					<th data-field="stationnum" data-sortable="true" data-align="center">站点名称</th>
                                       					<th data-field="pressureValue" data-sortable="true" data-align="center">压力(MPa)</th>
                                       					<th data-field="flowValue" data-sortable="true" data-align="center">流量(m³/s)</th>                                       					
                                       					<th data-field="turbidityValue" data-sortable="true" data-align="center">浊度(NTU)</th>
                                       					<th data-field="chlorineValue" data-sortable="true" data-align="center">余氯(mg/L)</th>                                    					
                                  					 </tr>
                                  				</thead>
                       
                              				 </table><!-- /.table-->  
										</div>	
										</div>														
	 
								 </div><!-- end col-md-12 -->
								 </div><!-- end row -->
								</div><!-- end realTimeData -->
								
															
								<div class="chart tab-pane" id="historyData" style="position: relative;">
								<!-- 时间查询 -->
                                  	<div class="row"  >
										<div class="col-md-12">
												<table>
													<tr>
													
													<td style="padding-left:20px">数据来源选择：</td>
													<td >
                   										 <select name="selectSource" style="height:34px;" id="selectSource" onchange="selectSourceChange()">
                       												 <option value="厂区">厂区运行数据</option>
                       												 <option value="管网">管网监测数据</option>
                 
                   										 </select>
                									</td>	
                									
													<td  style="padding-left:20px;display:none" id="stationSelectName" >站点选择：</td>
													<td id="stationSelect" style="display:none">
                   										 <select name="selectStation" style="height:34px;" id="selectStation" >
                       												 
                   										 </select>
                									</td>
                																																					
													<td style="padding-left:20px">数据类型选择：</td>
													<td >
                   										 <select name="selectType" style="height:34px;" id="selectType" >
                       												 
                   										 </select>
                									</td>	
													
														<td style="padding-left:20px">查询时间选择：</td>
														<% java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyy/MM/dd"); 
															java.util.Date currentTimeDam = new java.util.Date();//得到当前系统时间
															String str_dateDam = formatter.format(currentTimeDam); //将日期时间格式化 
															//out.println(str_date1);
															%>
													<td style="padding-top:15px">
														<div class="form-group">															
															<div class="input-group date form_date dateChoose" id="timeTableCanal"
																style="width:200px" data-date=""
																data-date-format="yyyy/mm/dd"
																data-link-field="beiginTimeOfWaterLevel"  
																data-link-format="yyyy/mm/dd">
																<input class="form-control" size="10" type="text" value="<%=str_dateDam %>" readonly>
																	 <span class="input-group-addon">
																	 <span class="glyphicon glyphicon-remove"></span> </span> 
																	 <span class="input-group-addon">
																	 <span class="glyphicon glyphicon-calendar"></span> </span>
															</div>
															
															<input type="hidden" id="beiginTimeOfWaterLevel"  value="<%=str_dateDam %>" />

														</div>
														</td>
														<td>~</td>
												            <td style="padding-top:15px">
														<div class="form-group">			
															
															<div class="input-group date form_date dateChoose" id="timeTable"
															style="width:200px" data-date="" data-date-format="yyyy/mm/dd"
															data-link-field="endTimeOfWaterLevel" data-link-format="yyyy/mm/dd">
																<input class="form-control" size="10" type="text"  value="<%=str_dateDam %>" readonly>
																	 <span class="input-group-addon">
																	 <span class="glyphicon glyphicon-remove"></span> </span> 
																	 <span class="input-group-addon">
																	 <span class="glyphicon glyphicon-calendar"></span> </span>
															</div>								
																<input type="hidden" id="endTimeOfWaterLevel"  value="<%=str_dateDam %>" />
														</div>
													</td>
														
														
                								<td><button  id="waterInfoBotton" class="btn btn-default" style="margin-left:20px;">查询</button></td>												 
													
													</tr>
												</table>
														
											 
										</div><!-- end col-md-12 -->
										</div>       <!-- row -->
										
										<div class ="row" style="margin-left:20px;margin-right:20px;display:none" id="waterLevelData" >	 						                                    	
											<h3 align="center" id= "waterStationNameId"> 
											<font ><s:property value="waterStationName"/><s:property value="dataType"/>压力表</font></h3>                        					
                       						<!-- 表格数据显示 -->   
											<div class="table-responsive" align="center" >
                         					 <%-- 分页属性 data-pagination="true"--%>
                              				 <table data-toggle="table" style="white-space: nowrap; text-align:center" class="table table-hover table-striped table-bordered table-condensed" id="waterLevleInfoTable"  data-cache="false"  
                               						 data-search="true" data-select-item-name="toolbar1" 
                                						data-pagination="true"  data-page-list="[5,10,20,50]"  data-show-export= "true">	
												<thead>
                                  					<tr>           
                                       					<th data-field="stationnum" data-sortable="true" data-align="center">站点名称</th>
                                       					<th data-field="time" data-sortable="true" data-align="center">时间</th>
                                       					<!-- 动态修改列名 -->
                                       					<th data-field="value" data-sortable="true" data-align="center"><font id="valueTypeInTable">压力(MPa)</font></th>
                                       					
                                  					 </tr>
                                  				</thead>
                       
                              				 </table><!-- /.table-->  
											</div>	
											<div class = "row" style="margin-top: 20px">	
												<!-- 图像显示 -->
												<div class="col-md-12 connectedSortable" >
												<!-- 折线图 -->		
												<h3 align="center" id="highChartsName"><font ><s:property value="waterStationName"/><s:property value="dataType"/>折线图</font>	</h3>								
												<div id="waterInfoContainer" style="min-width:100%;height:60%;"></div>
                       
											 	</div>
											
											</div>								
                           			
									</div>	<!-- Row -->
									
									<div id="noData" style="display:none">
									<h2 align="center">该点没有所选类型数据，或者所选时间选没有所选类型数据，请重新选择……</h2>
									
									</div>
                         		
								</div><!-- end historyTab -->
								
								<div class="chart tab-pane " id="dataEnterIn" style="position: relative;">
								<div class="row" align='center' >
									<table>
										<tr>
											<td   >站点选择：</td>
											<td  >
                   										 <select name="selectStationIn" style="height:34px;" id="selectStationIn" onchange="getAllChooseTypeIn()">
                       												 
                   										 </select>
                							</td>
											<td style="padding-left:20px;">录入类型选择:</td>
											
											<td >
              										 <select name="selectTypeIn" style="height:34px;" id="selectTypeIn" >
                  											
              										 </select>
              								</td>
              								
              								<td style="padding-left:20px">录入时间选择：</td>
              								<td style="padding-top:15px">
														<div class="form-group">
														<% java.text.SimpleDateFormat formatter1 = new java.text.SimpleDateFormat("yyyy/MM/dd/HH:mm:ss"); 
															java.util.Date current = new java.util.Date();//得到当前系统时间
															String str_date = formatter1.format(current); //将日期时间格式化 
															//out.println(str_date1);
															%>
															<div class="input-group date form_date dataIn" id="timeTableCanal"
																style="width:250px" data-date=""
																data-date-format="yyyy/mm/dd/hh:ii:ss"
																data-link-field="dataTimeIn"  
																data-link-format="yyyy/mm/dd/hh:ii:ss">
																<input id = "dataInTime" class="form-control" size="20" type="text" value="<%=str_date %>" readonly>
																	 <span class="input-group-addon">
																	 <span class="glyphicon glyphicon-remove"></span> </span> 
																	 <span class="input-group-addon">
																	 <span class="glyphicon glyphicon-calendar"></span> </span>
															</div>
															
															<input type="hidden" id="dataTimeIn"  value="<%=str_date %>" />
															

														</div>
											</td>
											
											
              									                							
										</tr>	
										
										<tr>
										<td>数值输入：</td>
										<td><input type="text" id="inputData"  ></td>
										</tr>									
									</table>
									
									
									
									<div class="row" style="margin-top:30px;" align='center' >	
									<button  id="dataInputSave"  class = "btn_save" style="margin-left:20px;"></button>		
									<button  id="dataInputSubmit" class = "btn_submit" style="margin-left:20px;"></button>												 
									
									</div>
									
									<div class="row" id="tempData" style="margin-top:50px;margin-left:20px;margin-right:20px"> 
									<!-- <h3  align='center' ><font >已保存数据</font></h3>	 -->				
										<div class="table-responsive">		
										<!-- data-show-toggle="true" data-show-columns="true" -->		
											<table data-toggle="table" style="white-space: nowrap; text-align:center" class="table table-hover table-striped table-bordered table-condensed" id="tempDataTable"  data-cache="false"  
                               						 data-search="true" data-select-item-name="toolbar1" 
                                						data-pagination="true"  data-page-list="[5,10,20,50]"  data-show-export= "true" >	
												<thead>
                                  					<tr>           
                                       					<th data-field="stationName" data-formatter ="chooseTempData" data-sortable="true" data-align="center">站点名称</th>
                                       					<th data-field="time" data-sortable="true" data-align="center">时间</th>
                                       					<th data-field="type" data-sortable="true" data-align="center">数据类型</th>                                       					
                                       					<th data-field="value" data-sortable="true" data-align="center">数据值</th>                                  					
                                  					 </tr>
                                  				</thead>
                       
                              				 </table><!-- /.table-->  
										</div>	
										
									</div>														
	 
								</div>		<!-- end row -->						
								</div><!--end dataEnterIn -->
							
							</div><!-- tab content -->
			</div>
      				 				  
		
    </body>
 
</html>
